<script setup>
const arr = [
  {
    icon1:'../../static/image/title.png',
    title1:'A学院',
    text1:'本学期已确认：1',
    text2:'本学期未确认: 0',
    to:'/pages/user/faction1-1',
  },
  {
    icon1:'../../static/image/title.png',
    title1:'B学院',
    text1:'本学期已确认：1',
    text2:'本学期未确认: 0',
    to:'/pages/user/faction1-1',
  },
  {
    icon1:'../../static/image/title.png',
    title1:'C学院',
    text1:'本学期已确认：1',
    text2:'本学期未确认: 0',
    to:'/pages/user/faction1-1',
  },
  {
    icon1:'../../static/image/title.png',
    title1:'D学院',
    text1:'本学期已确认：1',
    text2:'本学期未确认: 0',
    to:'/pages/user/faction1-1',
  },
  {
    icon1:'../../static/image/title.png',
    title1:'E学院',
    text1:'本学期已确认：1',
    text2:'本学期未确认: 0',
    to:'/pages/user/faction1-1',
  },{
    icon1:'../../static/image/title.png',
    title1:'F学院',
    text1:'本学期已确认：1',
    text2:'本学期未确认: 0',
    to:'/pages/user/faction1-1',
  },
]
const toNext = (to) => {
  uni.navigateTo({
    url:to
  })
}
</script>

<template>
  <view class="main1">
    <view class="df1" v-for="(item,user) in arr" :key="user">
      <view class="cd1 dfl1" @click="toNext(item.to)">
          <view class="icon-container">
            <image class="icon1" :src ='item.icon1'></image>
          </view>
          <view class="text-container">
            <text class="title1">{{item.title1}}</text>
            <text class="text1">{{item.text1}}</text>
            <text class="text2">{{item.text2}}</text>
          </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}
.icon-container {
  margin: 10px;
}
.icon1{
  width: 16px;
  height: 16px;
}
.text1{
  margin-top: 15px;
  margin-left: 10px;
  width: 319px;
  height: 19px;
  font-weight: 400;
  font-size: 12px;
  color: #5C5C5C;
  letter-spacing: 0;
  line-height: 10px;
}
.text2{
    margin-left: 10px;
    margin-top: 1px;
    width: 319px;
    height: 19px;
    font-weight: 400;
    font-size: 12px;
    color: #5C5C5C;
    letter-spacing: 0;
    line-height: 10px;
}
.df1{
  display: flex;
  justify-content: center;
}
.main1{
  width: 100%;
  height: 100%;
  background: #F3F5F9;
}
.dfl1{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
}
.cd1{
  margin-top: 10px;
  width: 351px;
  height: 100px;
  background: #FFFFFF;
  border-radius: 12px;
}
.title1{
  margin-left: 10px;
  width: 60px;
  height: 21px;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
</style>